<template>
  <div class="order">
    <header>
      <i @click="goBack"> < </i>
      <span>提交订单</span>
      <i class="iconfont icon-liaotian"></i>
    </header>
    <section>
      <div class="path">
        <h3 class="path-title">收货信息</h3>
        <div class="path-content">
          <div>
            <span>{{ path.name }}</span>
            <span>{{ path.tel }}</span>
          </div>
          <div>
            <span>{{ path.province }}</span>
            <span>{{ path.city }}</span>
            <span>{{ path.county }}</span>
            <span>{{ path.addressDetail }}</span>
          </div>
        </div>
      </div>
      <div class="payment">
        <div class="payment-title">支付方式：</div>
        <van-radio-group v-model="radioPayment">
          <van-radio name="wx">微信支付</van-radio>
          <van-radio name="ali">支付宝支付</van-radio>
        </van-radio-group>
      </div>
      <div class="goods">
        <ul>
          <li v-for="(i, d) in goodsList" :key="d">
            <div>
              <img :src="i.goodsImgUrl" alt="" />
            </div>
            <div class="goods-content">
              <h4>{{ i.goodsName }}</h4>
              <div class="goods-total">
                <span>¥{{ i.goodsPrice }}</span>
                <span>x{{ i.goodsNum }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <footer>
      <div class="order-total">
        <span>共</span>
        <b>{{ total.num }}</b>
        <span>件,</span>
        <span>总金额：</span>
        <em>¥{{ total.price }}</em>
      </div>
      <div class="order-topay" @click="submitOrder">提交订单</div>
    </footer>
  </div>
</template>
<script setup>
import { ref, defineComponent, onMounted } from 'vue'
import { useAppStore, useUserStore, useGoodsStore } from '@/stores'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'

const order = defineComponent({
  name: 'Order',
})
const route = useRoute()
const goodsStore = useGoodsStore()
const radioPayment = ref('wx')
const goodsList = ref([])
const { getTotal: total } = storeToRefs(goodsStore)
//模拟地址数据
const path = ref({
  id: 1,
  name: '张三',
  tel: '15516812978',
  province: '北京市',
  city: '北京市',
  county: '朝阳区',
  addressDetail: '某某小区7号楼3单元101',
})

onMounted(() => {
  const selectIds = JSON.parse(route.query?.selectIds || '[]')
  goodsList.value = goodsStore.cartList.filter((item) => selectIds.includes(item.goodsId))
  console.log('onMounted-goodsList :>> ', goodsList.value)
})
</script>

<style scoped>
/* header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.173333rem;
  color: #666;
  background-color: #fafafa;
  border-bottom: 2px solid #eee;
}

header i {
  padding: 0 0.4rem;
  font-size: 0.586666rem;
}

header span {
  font-weight: 300;
  font-size: 0.48rem;
}

/* section */
section {
  background-color: #fafafa;
}

section .path-title {
  padding: 0.4rem;
  font-size: 0.48rem;
}

section .path-content {
  padding: 0.16rem 0.4rem;
  font-size: 0.373333rem;
  background-color: #ffffff;
}

section .path-content span {
  padding-right: 0.16rem;
}

section .payment {
  padding: 0.16rem 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.426666rem;
  background-color: #ffffff;
}

section .payment .van-radio-group {
  display: flex;
  padding: 0.16rem 0;
}

section .payment .van-radio-group .van-radio {
  padding-right: 0.266666rem;
}

section .goods {
  padding: 0.16rem 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.426666rem;
  background-color: #ffffff;
}

section .goods ul {
  width: 100%;
}

section .goods ul li {
  display: flex;
  width: 100%;
}

section .goods ul li img {
  width: 1.973333rem;
  height: 1.973333rem;
}

section .goods ul li .goods-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 0.4rem;
}

section .goods ul li .goods-content .goods-total {
  display: flex;
  justify-content: space-between;
}

/* footer */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 1.2rem;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
}

footer .order-total {
  font-size: 0.426666rem;
}

footer .order-total span {
  padding: 0 0.16rem;
}

footer .order-total b {
  color: #666;
}

footer .order-total em {
  font-size: 0.48rem;
  color: #ff5777;
}

footer .order-topay {
  width: 3.2rem;
  line-height: 1.2rem;
  color: #fff;
  font-size: 0.426666rem;
  text-align: center;
  background-color: #ff5777;
}
</style>
